<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2022/12/29
  Time: 11:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path = request.getContextPath()+"/";%>
<!doctype html>
<html>
<head>
    <base href="<%=path%>">
    <title>新增编辑角色信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="static/ztree/css/zTreeStyle/zTreeStyle.css">
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<style>
input{
    width: 90%;
}
label.error{
    position: absolute;
    top: 5px;
    right: 30px;
    color: red;
}
</style>
<body>
<div class="container-fluid">
   <div class="row" >
       <div  class="col-xs-12" >
           <form id="form1" style="margin:10px 0px;">
               <input type="hidden" name="id" value="${role.id}"/>
               <div class="form-group">
                   <div class="row">
                       <div class="col-xs-3 text-right" >
                           <label >角色名称：</label>
                       </div>
                       <div class="col-xs-9">
                           <input type="text" id="roleName" value="${role.roleName}" class="form-control" name="roleName"  placeholder="用户名" required>
                       </div>
                   </div>
               </div>
               <div class="form-group">
                   <div class="row">
                       <div class="col-xs-3 text-right" >
                           <label >权限字符</label>
                       </div>
                       <div class="col-xs-9">
                           <input type="text" name="permission" value="${role.permission}" class="form-control">
                       </div>
                   </div>
               </div>
               <div class="form-group">
                   <div class="row">
                       <div class="col-xs-3 text-right" >
                           <label >显示顺序</label>
                       </div>
                       <div class="col-xs-9">
                           <input type="text" name="sort" value="${role.sort}" class="form-control"  placeholder="用户名">
                       </div>
                   </div>
               </div>
               <div class="form-group">
                   <div class="row">
                       <div class="col-xs-3 text-right" >
                           <label >备注</label>
                       </div>
                       <div class="col-xs-9">
                           <textarea name="bz" class="form-control">${role.bz}</textarea>
                       </div>
                   </div>
               </div>

               <div class="form-group">
                   <div class="row">
                       <div class="col-xs-3 text-right" >
                           <label >状态</label>
                       </div>
                       <div class="col-xs-9">
                           <select class="form-control" name="status">
                               <option value="0"  <c:if test="${role.status==0}">selected</c:if>>启用</option>
                               <option value="1"  <c:if test="${role.status==0}">selected</c:if>>禁用</option>
                           </select>
                       </div>
                   </div>
               </div>
           </form>
       </div>
   </div>
</div>
</body>
<script src="static/js/layer/layer.js"></script>
<!--导入jqueryvalidate-->
<script src="static/js/plugins/validate/jquery.validate.min.js"></script>
<script src="static/js/plugins/validate/messages_zh.min.js"></script>
<script src="static/js/sofwin.js"></script>
<script>
    function save(){
        var status = $("#form1").valid();
        if(status){
            $.operator.post('role/save',$("#form1").serialize());
        }
    }
    $(function(){
        $("#form1").validate({
            rules:{
                roleName:{
                    required: true,
                    remote:{
                        url: 'role/queryRole',
                        type:'get',
                        dataType:'json',
                        data:{
                            roleName:function(){
                                return $("#roleName").val();
                            }
                        }
                    }
                },
                permission: {
                    email:true,
                    required: true
                }
            },
            messages:{
                roleName:{
                    required:'角色名称不能为空',
                    remote:'角色名已经存在'
                },
                permission:{
                    email: '邮箱格式不正确',
                    required: '权限字符不能为空'
                }
            }
        });
    })
    <%--$(function(){--%>
    <%--    // 新增或编辑都需要加载部门信息--%>
    <%--    queryDepts();--%>
    <%--    loadUser();--%>
    <%--    function loadUser(){--%>
    <%--        var id = '${id}';--%>
    <%--        if(id!=''){--%>
    <%--            // 说明作用域中有id--%>
    <%--            $.operator.get('user/info/'+id,function(ret){--%>
    <%--                $("#userName").val(ret.result.userName);--%>
    <%--                //.....--%>
    <%--            });--%>
    <%--        }--%>
    <%--    }--%>
    <%--    function queryDepts(){--%>
    <%--        $.operator.get('dept/allDept',function(ret){--%>
    <%--            var depts = ret.result;--%>
    <%--            var $deptId = $("#deptId");--%>
    <%--            $deptId.html("");--%>
    <%--            for(var i=0;i<depts.length;i++){--%>
    <%--                $deptId.append('<option value="'+depts[i].id+'">'+depts[i].deptName+'</option>');--%>
    <%--            }--%>
    <%--        })--%>
    <%--    }--%>
    <%--})--%>

</script>
</html>
